<template>
  <div>
    <!-- 顶部 -->
    <van-nav-bar title="收货地址" @click-left="fanhui" left-arrow flexed>
      <template #right>
        <van-icon name="search" size="18" />
      </template>
    </van-nav-bar>

    <!-- 内容 -->
    <div class="wp">
      <div class="wp-site" v-for="(v,i) in list" :key="i">
        <div class="width">
          <div class="site-cell">
            <div class="site-cell-name">
              <div class="phone">
                <span>{{v.name}}</span>
                <span class="shouji">{{v.coll}}</span>
              </div>
              <div class="address">{{Sitezhuan(v.site)}} {{v.Detailed}}</div>
            </div>
            <div class="site-cell-use">
              <!-- <van-button plain hairline type="danger" size="small">使用</van-button> -->
            </div>
          </div>
          <div class="site-moren">
            <!-- <van-radio name="1" checked-color="#07c160">单选框 1</van-radio> -->
            <van-radio-group v-model="radio">
              <van-radio :name="v.id" @click="doPriority(v)" checked-color="#ea4141">已设为默认</van-radio>
            </van-radio-group>

            <div class="update">
              <van-icon name="label-o" size="25" />
              <div class="updat" @click="doUpdate(v)">修改</div>
              <van-icon name="close" size="25" />
              <div class="delete" @click="doDelete(v)">删除</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 手动添加 -->
      <div class="shoudongtj" @click="isShow(true)">
        <van-icon name="add-o" size="20" />
        <span class="tianjia">手动添加</span>
      </div>
    </div>

    <!-- 遮罩层 -->
    <van-overlay :show="show">
      <div class="wrapper">
        <div class="block">
          <div class="chahao">
            <van-icon name="close" size="24" @click="isShow(false)" />
          </div>
          <div class="addsite">添加地址</div>
          <div class="inp">
            <div class="ipt-name">
              <van-field v-model="data.name" clearable label="姓名" />
            </div>
            <div class="ipt-phone">
              <van-field v-model="data.coll" clearable label="号码" />
            </div>
          </div>
          <van-area
            title="请选择地址"
            :area-list="areaList"
            :columns-num="3"
            visible-item-count="1"
            item-height="0.4rem"
            @confirm="confirm"
            @cancel="cancel"
            value="111"
          />
          <div class="xiangxi">
            <van-field v-model="data.Detailed" placeholder="请输入详细地址" />
          </div>
          <!-- <div class="zhengze">请输入正确的手机号！！！</div> -->
          <van-button type="danger" size="large" @click="doSave">确认</van-button>
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
import { tokenCook } from "../utils/cookies";
import list from "../utils/city.data-3";
import qs from "qs";
export default {
  name: "Lsite",
  data() {
    return {
      areaList: list,
      checked: true,
      show: false,
      data: {
        site: [],
      },
      site: [],
      id: 0,
      radio: "1",
      r1: [],
    };
  },
  methods: {
    ...mapActions("site", [
      "getList",
      "setList",
      "deleteList",
      "updateSite",
      "updateSiteUid",
    ]),
    ...mapActions("login", ["getinfo"]),
    isShow(show) {
      this.show = show;
    },
    confirm(e, q) {
      this.data.site = e;
      console.log(e);
    },
    cancel(e, q) {
      console.log(e, q);
    },
    // 确定
    async doSave() {
      // await this.getList();

      // 获取uid
      let token = tokenCook.get();
      if (!token) {
        this.$router.push("/login");
        return;
      }
      let { uid } = await this.getinfo(token);
      await this.updateSiteUid(uid);

      let data = {};
      if (this.data.id) {
        data = { ...this.data };
      } else {
        data = { ...this.data, uid };
        data.site = JSON.stringify(data.site);
      }
      await this.setList({ ...data, uid });
      this.data = {};
      this.isShow(false);
    },
    // 删除
    async doDelete(v) {
      if (confirm("你确定要删除吗？？？")) {
        await this.deleteList(v.id);
      }
    },
    // 修改
    doUpdate(v) {
      this.setList(v);
      this.data = v;
      this.isShow(true);
    },
    // 转换
    Sitezhuan(v) {
      let res = JSON.parse(v),
        site = [];
      this.site = v;

      for (let i = 0; i < res.length; i++) {
        site.push(res[i].name);
      }
      return site.join(" ");
    },
    // 设置为默认
    async doPriority(item) {
      let r = this.list.filter((v) => {
        return v.priority == 1;
      });
      let data = {
        oldId: r.length ? r[0].id : item.id,
        newId: item.id,
      };
      console.log(this.list);
      this.id = item.id;
      await this.updateSite(data);
    },
    fanhui() {
      this.$router.push("/groupon");
    },
  },
  async mounted() {
    // await this.getList();

    // 获取uid
    let token = tokenCook.get();
    if (!token) {
      this.$router.push("/login");
      return;
    }
    let { uid } = await this.getinfo(token);
    await this.updateSiteUid(uid);

    let r =  this.list.filter((v) => {
      return v.priority == 1;
    });
    this.radio = r.length && r[0].id;

    console.log(this.list);
  },
  computed: {
    ...mapState("site", ["list"]),
    siteArr() {
      return this.list.map((v, i) => {
        return v.site;
      });
    },
  },
};
</script>

<style scoped>
.van-nav-bar.van-hairline--bottom {
  background-color: #ea4141;
}

.van-nav-bar >>> .van-icon {
  color: #fff;
}

.van-nav-bar >>> .van-nav-bar__title.van-ellipsis {
  color: #fff;
}

.wp-site {
  height: 2rem;
  background-color: #fff;
  margin: 0.2rem 0;
}

.wp {
  height: 10.6rem;
  background: #f5f5f5;
  overflow: hidden;
}

.wp-site {
  height: 2rem;
  background-color: #fff;
  margin: 0.2rem 0;
}

.site-cell {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 1.3rem;
  align-items: center;
}

.width {
  height: 100%;
  width: 92%;
  margin: auto;
}

.phone {
  font-size: 0.28rem;
}

span.shouji {
  margin-left: 0.5rem;
}

.address {
  font-size: 0.23rem;
  margin-top: 0.2rem;
  color: #666;
}

/* .site-cell-use {
  color: red;
  border: 1px solid;
  padding: 0.05rem 0.3rem;
  font-size: 0.25rem;
} */

.site-moren {
  border-top: 1px solid #e2e2e2;
  display: flex;
  height: 0.7rem;
  justify-content: space-between;
}

.update {
  display: flex;
  align-items: center;
  font-size: 0.25rem;
  color: #858585;
}

.updat {
  margin-right: 0.2rem;
}

.delete {
  margin-left: 0.05rem;
}

.van-button--plain.van-button--danger {
  color: #ee0a24;
  width: 1rem;
}

.shoudongtj {
  border: 1px solid;
  color: red;
  width: 3rem;
  height: 0.7rem;
  text-align: center;
  line-height: 0.7rem;
  margin: 0.3rem 0 0 0.2rem;
  font-size: 0.25rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

span.tianjia {
  margin-left: 0.2rem;
}

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 5.5rem;
  height: 6rem;
  background-color: #fff;
  position: relative;
}

/* .van-picker.van-area {
  width: 3rem;
} */

.chahao {
  position: absolute;
  top: -0.2rem;
  right: -0.2rem;
  background-color: #000;
  border-radius: 100%;
  color: #fff;
  border: 1px solid;
  height: 0.42rem;
  width: 0.4rem;
}

.addsite {
  height: 0.9rem;
  color: #999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.inp {
  display: flex;
  justify-content: space-between;
}

.van-cell.van-field {
  font-size: 0.2rem;
}

.ipt-name {
  height: 1rem;
  border: 1px solid;
  border-left: 0;
  border-left: 0;
  display: flex;
  align-items: center;
}

.ipt-phone {
  height: 1rem;
  border: 1px solid;
  border-right: 0;
  border-left: 0;
  display: flex;
  align-items: center;
}

.ipt-name >>> .van-cell__title.van-field__label {
  width: 0.4rem;
}

.ipt-phone >>> .van-cell__title.van-field__label {
  width: 0.4rem;
}

.van-field__body {
  font-size: 0.25rem;
}

.zhengze {
  padding: 0rem 0 0 0.25rem;
  font-size: 0.2rem;
  color: #ee0a24;
}

button.van-button.van-button--danger.van-button--large {
  margin-top: 0.3rem;
  /* background-color: #bebebe; */
  position: absolute;
  bottom: 0;
}
</style>